<template>
  <!--下一页加载-->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <ul>
      <!--遍历数据-->
      <li v-for="item in list" :key="item.id">
        <div>
          <!--数据渲染区-->
          <!--图片懒加载-->
          <van-image lazy-load :src="item.image" />
        </div>
        <div>
             <!--商品卡片-->
          <van-card
            :price="item.price"
            :title="item.title"
          />
        </div>
      </li>
    </ul>
    <!--骨架屏效果-->
    <van-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
      </div>
    </div>
  </template>
</van-skeleton>
  </van-list>
</template>

<script setup>
import { ref, onMounted } from "vue";
//引入request请求
import request from "@/utils/request";
const list = ref([]);
const pagination = ref(1);
const loading =ref(false)
const finished=ref(false)
//onMounted挂载  list数据列表
onMounted(() => {
  //rquest获取
  request
    .get("/list", {
      params: {
        pagination: 1,
        pageNum: 10,
      },
    }).then((res) => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
});
//加载loading
const onLoad =()=>{
      //展示加载
      loading.value=true 
      //rquest获取
      request.get('/list',{
        params:{
            pagination:pagination.value,
            pageNum:10
        }
      }).then((res) => {
      if (res.data.code == 200) {
        list.value = [...list.value,...res.data.data]
      }
      //关闭加载
      loading.value=false
      //页码+1
      pagination.value++
      //如果列表长度大于总页数 展示finished
      if(list.value.length >= res.data.total){
        finished.value=true
      }
    });
}

</script>

<style lang="scss" scoped>
ul {
  column-count: 2;
  column-gap: 10px;
  li {
    //避免元素换行
    break-inside: avoid;
    img {
      width: 100%;
    }

    .price {
      color: #f00;
    }
  }
}
</style>